﻿///<reference path="../lib/lt_tsbb.d.ts"/>

window.onload = () =>
{
    //svg 动态创建原理展示
    //svg对象
    var svg: SVGSVGElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.style.position = "absoulte";
    svg.setAttribute("width", "500");
    svg.setAttribute("height", "200");
    document.body.appendChild(svg);

    var x1 = 250;
    var y1 = 25;
    //方块1
    {
        var rect: SVGRectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("stroke-width", "1.5");
        rect.setAttribute("stroke", "#160a0a");
        rect.setAttribute("fill", "#7fff00");
        rect.setAttribute("width", "150");
        rect.setAttribute("height", "50");
        rect.setAttribute("x", "100");
        rect.setAttribute("opacity", "0.1");
        svg.appendChild(rect);
    }
    var x2 = 250;
    var y2 = 125;
    //方块2
    {
        var rect: SVGRectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("stroke-width", "1.5");
        rect.setAttribute("stroke", "#160a0a");
        rect.setAttribute("fill", "#7fff00");
        rect.setAttribute("width", "150");
        rect.setAttribute("height", "50");
        rect.setAttribute("x", "250");
        rect.setAttribute("y", "100");
        rect.setAttribute("opacity", "0.1");
        svg.appendChild(rect);
    }
    //贝塞尔曲线
    var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("opacity", "0.5");
    path.setAttribute("stroke-width", "5");
    path.setAttribute("stroke", "#000");
    path.setAttribute("fill", "#fff");
    var pstr = "m " + x1 + "," + y1 + " ";//左
    pstr += "c " + 50 + "," + 10 + " ";//左控制点
    pstr += (x2 - x1 - 50) + "," + (y2 - y1 ) + " ";//右控制点   
    pstr += (x2 - x1) + "," + (y2 - y1) + " ";//右
    path.setAttribute("d", pstr);
    // path.setAttribute("d", "m 50,50 c 0,-50 100,-50 100,0 l 0,-30 m 20,0 l 0,30 c 0,-50 100,-50 100,0 c 0,-50 100,-50 100,0");
    //路径的画线是个脚本,
    //m是起点，移动50，50,全部都是相对之前的坐标，起始点0，0， 
    //c是画曲线，之前的坐标 作为左端点
    //然后跟三个坐标，第一个作为左控制点，相对于起点，
    //第二个作为右控制点，相对于起点
    //第三个作为右端点，相对于起点
    //l是画直线，之前的坐标作为左端点
    //然后跟一个坐标，作为右端点，相对于起点
    //如只画一个贝塞尔曲线
    //path.setAttribute("d","m 50,50 c 0,-50 100,-50 100,0");
    //即可
    svg.appendChild(path);
};

